/* eslint-disable react/jsx-pascal-case */
import { FC } from 'react'
import { Git } from '@assets/images/index'
import { Login } from '@components/index'
import { useLogin } from '@hooks/index'

interface Props {}

const Home: FC<Props> = () => {
  const [modalConf, switchOpen] = useLogin()

  function loginHandler() {
    switchOpen()
  }

  return (
    <div className='content'>
      <div className='slogan'>
        <h1 className='fadeInOnBothSides'>一些程序输出数字</h1>
        <h2 className='fadeInOnBothSides'>另一些程序输出诗词</h2>
        <button className='login' onClick={loginHandler}>
          Login
        </button>
      </div>
      <div className='right'>
        <img src={Git} alt='git' />
      </div>
      <Login.default modalProps={{ visible: modalConf.open, onCancel: loginHandler, centered: true }} />
    </div>
  )
}

export default Home
